<!--
 * @Author: your name
 * @Date: 2021-09-21 14:09:13
 * @LastEditTime: 2021-09-23 17:00:04
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \product-display\src\page\operate\type\list.vue
-->
<template>
  <div class="typeList" style="height: calc( 100% - 80px )">
    <div class="pageTop">
      <el-row>
        <el-col :xs="xs" :sm="sm" :md="md" :lg="lg" :xl="xl">
          <el-button @click="getDataList">更新</el-button>
          <el-button @click="toAdd">新增</el-button>
        </el-col>
      </el-row>
    </div>
    <div class="tableBox" style="height: calc( 100% - 100px )">
      <el-table
        :data="tableData"
        class="typeTable"
        border>
        <el-table-column
          prop="categoryName"
          label="分类名称"
          width="180">
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间"
          width="180">
        </el-table-column>
        <el-table-column
          prop="updateTime"
          label="更新时间"
          width="180">
        </el-table-column>
        <el-table-column
          label="操作"
          width="100">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleClick(scope.row)">编辑</el-button>
            <el-button type="text" size="small" :disabled="parentObj[scope.row.id]" @click="deleteType(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { getProductCategoryList, deleteProductCategory, getProductList } from '@/api/api.js'

export default {
  name: 'operateList',
  data () {
    return {
      tableData: [],
      xs: {span: 10, offset: 14},
      sm: {span: 8, offset: 16},
      md: {span: 6, offset: 18},
      lg: {span: 4, offset: 20},
      xl: {span: 3, offset: 21},
      parentObj: {}
    }
  },
  mounted () {
    this.getDataList()
  },
  methods: {
    getDataList () {
      getProductCategoryList().then(res => {
        this.tableData = res
        res.forEach(item => {
          this.parentObj[item.parentId] = true
        })
        localStorage.setItem('productCategoryList', JSON.stringify(res))
      })
    },
    handleClick (obj) {
      this.$router.push({ path: '/operate/type/form', query: obj })
    },
    toAdd () {
      this.$router.push({ path: '/operate/type/form' })
    },
    deleteType (obj) {
      getProductList({
        parentId: obj.id,
        pageSize: 1
      }).then(res => {
        const { totalCount } = res
        if (totalCount > 0) {
          this.$message({
            type: 'info',
            message: '当前分类下有商品，无法删除'
          })
        } else {
          this.$confirm(`确认删除分类--${obj.categoryName}？`, '确认信息', {
            distinguishCancelAndClose: true,
            confirmButtonText: '确认',
            cancelButtonText: '取消'
          })
            .then(() => {
              deleteProductCategory(obj).then(res => {
                this.getDataList()
                this.$message({
                  type: 'info',
                  message: '删除成功'
                })
              })
            })
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.typeList {
  width: 100%;
  padding-left: 30px;
  .pageTop {
    padding: 10px 0;
  }
  .tableBox {
    width: 100%;
    overflow: auto;
  }
}
</style>
